import { Alert, Checkbox, Icon } from 'antd';
import React, { Component } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import LoginComponents from './components/Login';
import MD5 from 'md5';
import styles from './style.less';
const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginComponents;

class Login extends Component {
  loginForm = undefined;
  state = {
    // type: 'account',
    autoLogin: true,
  };

  componentDidMount() {

  }

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };
  handleSubmit = (err, values) => {
    const { type } = this.state;

    if (!err) {
      const { dispatch } = this.props;
      const passd = MD5(values.password)
      const newValues = {
        ...values,
        password: passd
      }
      dispatch({
        type: 'login/login',
        payload: { ...newValues, type },
      });
    }
  };
  onTabChange = type => {
    this.setState({
      type,
    });
  };
  // onGetCaptcha = () =>
  //   new Promise((resolve, reject) => {
  //     if (!this.loginForm) {
  //       return;
  //     }

  //     this.loginForm.validateFields(['mobile'], {}, async (err, values) => {
  //       if (err) {
  //         reject(err);
  //       } else {
  //         const { dispatch } = this.props;

  //         try {
  //           const success = await dispatch({
  //             type: 'login/getCaptcha',
  //             payload: values.mobile,
  //           });
  //           resolve(!!success);
  //         } catch (error) {
  //           reject(error);
  //         }
  //       }
  //     });
  //   });
  renderMessage = content => (
    <Alert
      style={{
        marginBottom: 24,
      }}
      message={content}
      type="error"
      showIcon
    />
  );

  render() {
    const { userLogin = {}, submitting } = this.props;
    const { status, type: loginType } = userLogin;
    const { type, autoLogin } = this.state;
    return (
      <div className={styles.main}>
        <LoginComponents
          defaultActiveKey={type}
          onTabChange={this.onTabChange}
          onSubmit={this.handleSubmit}
          onCreate={form => {
            this.loginForm = form;
          }}
        >
          {/* <Tab
            key="account"
            tab={'tab-login-credentials'}
          >
            {status === 'error' &&
              loginType === 'account' &&
              !submitting &&
              this.renderMessage(
                {
                  id: 'user-login.login.message-invalid-credentials',
                }
              )}
            
          </Tab>
          <Tab
            key="mobile"
            tab={'tab-login-mobile'}
          >
            {status === 'error' &&
              loginType === 'mobile' &&
              !submitting &&
              this.renderMessage(
                'message-invalid-verification-code'
              )}
            <Mobile
              name="mobile"
              placeholder={'phone-number.placeholder'}
              rules={[
                {
                  required: true,
                  message: 'phone-number'
                },
                {
                  pattern: /^1\d{10}$/,
                  message: 'wrong-format'
                },
              ]}
            />
            <Captcha
              name="captcha"
              placeholder={{
                id: 'user-login.verification-code.placeholder',
              }}
              countDown={120}
              onGetCaptcha={this.onGetCaptcha}
              getCaptchaButtonText={'form.get-captcha'}
              getCaptchaSecondText={'user-login.captcha.second'}
              rules={[
                {
                  required: true,
                  message: 'verification-code'
                },
              ]}
            />
          </Tab> */}
          <UserName
            name="username"
            placeholder={`请输入用户名`}
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
            ]}
          />
          <Password
            name="password"
            placeholder={'请输入密码'}
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
            onPressEnter={e => {
              e.preventDefault();

              if (this.loginForm) {
                this.loginForm.validateFields(this.handleSubmit);
              }
            }}
          />
          <div>
            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
              自动登录
            </Checkbox>
            {/* <a
              style={{
                float: 'right',
              }}
              href=""
            >
              忘记密码
            </a> */}
          </div>
          <Submit loading={submitting}>
            登录
          </Submit>
          {/* <div className={styles.other}>
            user-login.login.sign-in-with
            <Icon type="alipay-circle" className={styles.icon} theme="outlined" />
            <Icon type="taobao-circle" className={styles.icon} theme="outlined" />
            <Icon type="weibo-circle" className={styles.icon} theme="outlined" />
            <Link className={styles.register} to="/user/register">
              user-login.login.signup
            </Link>
          </div> */}
        </LoginComponents>
      </div>
    );
  }
}

export default connect(({ login, loading }) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
